﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
    <script src="d3.js"></script>
</head>
<body>
    <input type="button" id="btn1" value="set" /><br />

    <svg style="position: absolute; float: left;" id="svg1">
        <image x="130" y="100" width="50" height="50" fill="black" stroke="#000" xlink:href="1.png"></image>
    </svg>
    <svg id="isvg" width="1000" height="1000" style="position: absolute; float: left;">
        <defs>
            <marker id="idtext" viewBox="0 0 120 50" refX="0" refY="0" markerUnits="strokeWidth" markerWidth="20" markerHeight="20" orient="auto">
                <text style="font-family: sans-serif; font-size: 14pt;" x="20" y="20">                           text        </text>
            </marker>
        </defs>
        <g>
            <marker id="idArrow" viewBox="0 1 20 20" refX="0" refY="10">
                <path d="M 0 0 L 20 10 L0 20 z"></path>
            </marker>
        </g>
        <!--<polyline points="282,195 430,195" stroke-width="2" stroke="black" fill="none" marker-end="url(#idArrow)"></polyline>-->
        <rect x="541" y="306" width="48" height="48" rx="20" ry="20"></rect>
    </svg>


    <div id="d1"></div>
    <svg id="svg2"></svg>

</body>
</html>
<script>

    var svgContainer = d3.select("body").append("svg")
        .attr("id", "svggg")
        .attr("width", 1000)
        .attr("height", 1000);

    var circle = svgContainer.append("circle")
        .attr("id", "c")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("tag", "cc")
        .attr("r", 20);

    $("#btn1").click(function () {
        big();
    })
    var r = circle.attr("r");
    function big() {
        r++;
        if (r == 60) {
            r = 20;
        }
        circle.attr("r", r);
        var arg = arguments.callee;
        window.setTimeout(arg, 10);

    }
</script>
